<template>
  <view class="essayComBox" @click="emit('essayClick')">
    <view class="ranking rankingOne" v-if="props.index === 1">{{
      props.index
    }}</view>
    <view class="ranking rankingTwo" v-else-if="props.index === 2">{{
      props.index
    }}</view>
    <view class="ranking rankingThree" v-else-if="props.index === 3">{{
      props.index
    }}</view>
    <view class="ranking" v-else>{{ props.index }}</view>
    <view class="content">
      <view class="title">{{ props.title }}</view>
      <view class="synopsis">{{ props.content }}</view>
      <view class="bottom">
        <text class="publisher">{{ props.publisher }}</text>
        <view class="heat">
          <!-- <view>图</view> -->
          <uni-icons
          type="fire-filled"
          size="22"
          color="red"
        ></uni-icons>
          <text>{{ props.synopsis }}热度</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue';
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'

//自定义事件
const emit =defineEmits(['essayClick'])

//排名
const props = defineProps({
  index: { type: Number },
  title: { type: String },
  content: { type: String },
  synopsis: { type: String},
  publisher: { type: String },
} as const)

// 组件周期函数--监听组件挂载完毕
onMounted(() => {});
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {});
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {});
// 组件周期函数--监听组件激活(显示)
onActivated(() => {});
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {});
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {});

</script>

<style scoped lang="scss">
.essayComBox {
  display: flex;
  width: 685rpx;
  padding: 10rpx 20rpx 25rpx 20rpx;
  justify-content: space-between;
  margin: auto;

  box-shadow: rgba(63, 67, 72, 0.1) 0px 10px 10px -10px;
  border-radius: 10rpx;

  .ranking {
    width: 32rpx;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 24rpx;
    margin-top: 10rpx;
    text-align: center;
    color: rgb(250, 246, 246);
    border-radius: 4rpx;
    background-color: rgb(223, 220, 220);
  }
  .rankingOne {
    background-color: red;
  }
  .rankingTwo {
    background-color: rgb(250, 148, 39);
  }
  .rankingThree {
    background-color: rgb(52, 171, 246);
  }

  .content {
    width: 640rpx;
    margin-left: 10rpx;

    .title {
      font-size: 34rpx;
      font-weight: bolder;
      display: -webkit-box;
      overflow: hidden;
      margin-bottom: 10rpx;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2; /* 指定显示的行数 */
      -webkit-box-orient: vertical;
      word-break: break-all; /* 强制英文单词被拆开 */
      overflow-wrap: break-word; /* 在必要时允许长单词内部断行，防止内容溢出容器 */
    }

    .synopsis {
      font-size: 26rpx;
      color: rgb(102, 100, 100);
      display: -webkit-box;
      overflow: hidden;
      letter-spacing: 2rpx;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2; /* 指定显示的行数 */
      -webkit-box-orient: vertical;
      word-break: break-all; /* 强制英文单词被拆开 */
      overflow-wrap: break-word; /* 在必要时允许长单词内部断行，防止内容溢出容器 */
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      margin-top: 10rpx;
      color: rgb(123, 121, 121);

      .heat {
        color: rgb(245, 86, 28) !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        image {
          width: 35rpx;
          height: 35rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>
